<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <script src="/vue.global.js"></script>
    <title>8-dynamic-component</title>
  </head>

  <body>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <!-- 动态组件 -->
      <component v-bind:is="currentTabComponent" class="tab"></component>

      <!-- 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，
        并导致最终渲染结果出错。
        幸好这个特殊的 v-is attribute 给了我们一个变通的办法： -->
      <table>
        <tr v-is="'blog-post-row'"></tr>
      </table>
      <!-- WARNING -->
      <!-- v-is 值应为 JavaScript 字符串文本： -->
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            currentTab: 'Home',
            tabs: ['Home', 'Posts', 'Archive'],
          };
        },
        computed: {
          currentTabComponent() {
            return 'tab-' + this.currentTab.toLowerCase();
          },
        },
      });

      app.component('tab-home', {
        template: `<div class="demo-tab">Home component</div>`,
      });
      app.component('tab-posts', {
        template: `<div class="demo-tab">Posts component</div>`,
      });
      app.component('tab-archive', {
        template: `<div class="demo-tab">Archive component</div>`,
      });

      app.mount('#dynamic-component-demo');
    </script>
  </body>
</html>
